<template>
  <div class="tabs-desc-root">

    <div class="back-icon-container">
      <svg-icon class="back-icon" :icon-class="isDark ? 'left-cat-dark' : 'left-cat-light'" width="130px"
        height="130px"></svg-icon>
    </div>

    <el-tabs class="custom-tabs">
      <el-tab-pane>
        <template #label>
          <el-icon class="icongc gc-qunti"></el-icon>
          <span>项目说明</span>
        </template>

        <div class="tabs-desc-logo">
          <img src="@/assets/imgs/鲁班嘉文.png" />
          <div>
            <div class="project-name"> Guard Cat</div>
            <div class="project-desc">GuardCat 是一个后台监控系统, 支持多维度指标的服务监控, 流量监控, 日志监控, 事件告警, 保障集群健康.</div>
          </div>
        </div>

        <!--  -->
        <div class="use-tech-title">使用框架</div>
        <div class="use-tech">
          <div class="use-tech-column">
            <shieldTag tagKey="JDK" tagValue="1.8" />
            <shieldTag tagWidth="108px" tagKey="SpringBoot" tagValue="2.6.3" />
            <shieldTag tagWidth="108px" tagKey="SpringCloud" tagValue="2021.0.1.0" />
            <shieldTag tagWidth="108px" tagKey="SpringCloud" tagValue="Gateway" />
            <shieldTag tagWidth="108px" tagKey="SpringCloud" tagValue="Feign" />
            <shieldTag tagWidth="108px" tagKey="SpringCloud" tagValue="Alibaba 2021.0.1" />
            <shieldTag tagWidth="108px" tagKey="Nacos" tagValue="1.4.2" />
            <shieldTag tagWidth="108px" tagKey="Sentinel" tagValue="1.8.2" />
            <shieldTag tagWidth="108px" tagKey="Redis" tagValue="> 6" />
            <shieldTag tagWidth="108px" tagKey="ElasticSearch" tagValue="7.10.1" />
            <shieldTag tagWidth="108px" tagKey="FileBeat" tagValue="7.10.1" />
            <shieldTag tagWidth="108px" tagKey="LogStash" tagValue="7.10.1" />
            <shieldTag tagWidth="108px" tagKey="ApiDoc" tagValue="SmartDoc" />
            <shieldTag tagWidth="108px" tagKey="授权框架" tagValue="自研" />
            <shieldTag tagWidth="108px" tagKey="链路追踪" tagValue="自研" />
            <shieldTag tagWidth="108px" tagKey="服务监控" tagValue="自研" />
          </div>

          <div class="use-tech-column">
            <shieldTag tagWidth="108px" tagKey="TypeScript" tagValue="~4.7" />
            <shieldTag tagWidth="108px" tagKey="Vite" tagValue="^4.0" />
            <shieldTag tagWidth="108px" tagKey="Vue" tagValue="^3.2" />
            <shieldTag tagWidth="108px" tagKey="ElementPlus" tagValue="^2.2" />
            <shieldTag tagWidth="108px" tagKey="Echarts" tagValue="^5.4" />
            <shieldTag tagWidth="108px" tagKey="scss" tagValue="^1.57" />
          </div>
        </div>

        <!-- 团队成员 -->
        <div class="use-tech-title">团队成员</div>
        <div class="dept-users">
          <div class="dept-users-user" v-for="user in users" :key="user.nickName">
            <img :src="user.avatar" referrer="no-referrer" alt="">
            <span>{{ user.nickName }}</span>
          </div>
        </div>

      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <el-icon class="icongc gc-wenzhang1"></el-icon>
          <span>更新日志</span>
        </template>
        <guardCatUpdateLog></guardCatUpdateLog>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useDark } from '@vueuse/core';
import { developersApi } from "@/api/user";
import shieldTag from "@/components/ShieldTag.vue";
import guardCatUpdateLog from "@/components/GuardCatUpdateLog.vue";

const isDark = useDark();
const users = ref([{
  avatar: '',
  nickName: ''
}])

onMounted(() => {
  developersApi().then(resp => {
    users.value = resp.data;
  })
})

</script>

<style scoped lang="scss">
.tabs-desc-root {
  @include box(100%, 100%);
  position: relative;
  overflow: hidden;

  .tabs-desc-logo {
    @include flex(row, space-between, center);
    padding: 10px 0;

    img {
      @include themeBorder(2px, #858585, #707070, 'around', 10px);
      @include themeShadow(3px 3px 10px 1px rgba(0, 0, 0, .5), 3px 3px 10px 1px rgba(0, 0, 0, .3));
      height: 150px;
      margin-right: 10px;
      transition: box-shadow 0.3s;

      &:hover {
        @include themeShadow(3px 3px 10px 1px rgba(0, 0, 0, .8), 3px 3px 10px 1px rgba(0, 0, 0, 1))
      }
    }

    @keyframes glow {
      to {
        background-position: -300%;
      }
    }

    .project-name {
      @include font(56px, 700);
      background: linear-gradient(90deg,
          #c1992f,
          #c1992f,
          #707070,
          #c1992f,
          #c1992f,
        );
      -webkit-background-clip: text;
      color: transparent;
      height: 100%;
      animation: glow 8s linear infinite;
      transition: 1.5s;
      background-size: 300%;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, .4);

    }

    .project-desc {
      @include font(13px);
      color: var(--el-text-color-placeholder);
      text-indent: 13px;
      line-height: 24px;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
    }
  }

  .use-tech-title {
    @include font(15px, 700);
    width: 100%;
    color: var(--el-color-primary);
    background-color: var(--el-color-primary-light-8);
    border-radius: 5px;
    padding: 3px 10px;
  }

  .use-tech-title:first-child {
    margin-top: 0px;
  }

  .use-tech {
    @include flex(row, flex-start, flex-start);
    width: 100%;
    overflow-x: scroll;

    &-column {
      @include flex(column, flex-start, flex-start);
      white-space: nowrap;
      box-sizing: border-box;
      padding: 5px 15px 15px 15px;
    }
  }

  // 团队成员
  .dept-users {
    @include flex(row, flex-start, flex-start);
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px 10px 10px;
    flex-flow: row wrap;

    &-user {
      @include box(60px, 90px);
      @include flex(column, flex-start, center);
      @include font(11px, 700);
      color: var(--el-color-primary);
      padding: 10px 5px;
      border-radius: 5px;
      transition: box-shadow 0.5s;
      margin: 5px 2px;

      &:hover {
        box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, .3);
      }

      img {
        @include box(50px, 50px);
        border-radius: 50px;
      }

      span {
        @include font(12px);
        margin-top: 5px;
      }
    }
  }

  .custom-tabs {
    @include box(100%, 100%);
    
    :deep(.el-tabs__nav-scroll) {
      .is-active {
        font-weight: bold;
      }
    }

    :deep(.el-tabs__header) {
      margin: 0;
    }

    :deep(.el-tabs__item) {
      padding: 0 10px;
    }

    :deep(.el-tabs__content) {
      height: calc(100% - 55px);
    }

    :deep(.el-tab-pane) {
      height: calc(100%);
      padding: 0 10px;
      overflow-y: scroll;
    }

  }

  .back-icon-container {
    @include flex(row, flex-end, flex-start);
    @include box(130px, 130px);
    position: absolute;
    bottom: 0px;
    right: -41px;
    z-index: 1000;
    // border: 1px solid red;
    // animation: rotate 3s infinite alternate-reverse;

    &:hover {
      // right: -64px;
      transform: rotate(20deg);
      transform-origin: right bottom;
    }

    .back-icon {
      transform: rotateY(180deg);
    }
  }

}
</style>